<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义视频播放器</title>
    <link rel="stylesheet" href="./fonts/font-awesome.css">
    <link rel="stylesheet" href="./css/vides.css">
    <style>
        @media screen and (max-width:960px){
            /*当屏幕小于960px宽度时,采用这个样式设置*/
        }
        @media screen and (min-width:960px){
            /*当屏幕大于960px宽度时,采用这个样式设置*/
        }
    </style>

</head>

<body>
    <figure>
        <figcaption>视频播放器</figcaption>
        <div class="player">
            <video src="./video/movie.mp4"></video>
            <div class="controls">
                <a href="javascript:;" class="switch fa fa-play"></a>
                <div class="progress">
                    <div class="line"></div>
                    <div class="bar"></div>
                </div>
                <div class="timer">
                    <span class="current">00:00:25</span>/<span class="total">00:00:52</span>
                </div>
                <a href="javascript:;" class="expand fa fa-arrows-alt"></a>
            </div>
        </div>
    </figure>
</body>
<script src="./js/jquery.min.js"></script>
<script>
    // let video=document.querySelector("video");
    let video = $("video").get(0);
    $(document).keypress(function(event){
        if($(".switch"))hasClass("fa-play")
    })

    $(".expand").onclick=function(){
        if($(this).hasClass("fa-arrows-alt")){
            video.webkitMatchesSelector();
            $(this).addClass("fa-compress");
        }else{
            video.webkitCancelFullScreen();
            $(this).addClass("fa-arrows-alt").removeClass(fa-compress);
        }
    }

    $(".progress").on("click",function(event){
        //当鼠标单击时,执行这里的代码
        //只需更改video的currentTime属性的值,这个值以改变,就自动触发ontimeup
        let offset=event.offsetX;
        let current=(offset/$(this).width())*video.duration;
        video.currentTime=current;
    })
   
    video.ontimeupdate=function(){
        let current=video.currentTime;
        let w=(current/video.duration)*100+"%";
        $(".current").html(formatTime(current));
        $(".line").css("width",w);
    }
    function formatTime(time){
        let h=Math.floor(time/3600);
        let m=Math.floor(time%3600/60);
        let s=Math.floor(time%60);
        if(h<10) h="0"+h;
        if(m<10) m="0"+m;
        if(s<10) s="0"+s;
        return h+":"+m+":"+s;

        return m;
    }
    video.oncanplay = function () {
        $("video").show();
        let totalTime = video.duration;
        $(".total").html(formatTime(totalTime))
    }

    $(".switch").on("click", function () {
        if ($(this).hasClass("fa-play")) {//检查当前是播放还是暂停
            video.play();
            $(this).removeClass("fa-play").addClass("fa-pause");
        } else {
            video.pause();
            $(this).removeClass("fa-pause").addClass("fa-play");
        }
    });


</script>

</html>